<template>
  <el-dialog v-model="visible" :title="title" width="1000" show-footer show-zoom resize :close-on-click-modal="false"
    :close-on-press-escape="false" @close="close">
    <template #default>
      <el-form ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120" size="default">
        <el-row>
          <el-col :span="8">
            <el-form-item label="退货单号">
              {{ form.back_warehouse_order_no }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货类型">
              {{ form.back_type_cn }}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="退货方式">
              {{ form.join?.back_mode_cn }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退货地址">
              {{ form.join?.back_address }}
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <vxe-table :data="form.detail" :round="true" height="300">
        <vxe-column field="sku" title="SKU"></vxe-column>
        <vxe-column field="sku_cn_title" title="产品名称">
          <template #default="{ row }">
            <el-tooltip className="item" effect="dark" :content="row.sku_cn_title" placement="top">
              <div class='overflow-line2'>{{ row.sku_cn_title }}</div>
            </el-tooltip>
          </template>
        </vxe-column>
        <vxe-column field="name" title="图片">
          <template #default="{ row }">
            <div>
              <div class="image-item" v-for="(item, index) in row.image" :key="index"><img :src="item"></div>
            </div>
          </template>
        </vxe-column>
        <vxe-column field="back_num" title="退货数量"></vxe-column>
      </vxe-table>
      <el-form class="pt-4" ref="formRef" :rules="rules" :model="form" label-align="right" label-width="120"
        size="default">
        <el-row>
          <el-col :span="12">
            <el-form-item label="快递公司">
              <el-input v-model="form.delivery" type="text" placeholder="快递公司" :disabled="handleType == 'view'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快递单号">
              <el-input v-model="form.delivery_no" type="text" placeholder="快递公司" :disabled="handleType == 'view'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="费用">
              <el-input v-model="form.fee" placeholder="费用" :disabled="handleType == 'view'">
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="备注" :disabled="handleType == 'view'"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">关闭</el-button>
        <template v-if="handleType != 'view'">
          <el-button v-if="handleType == 'out'" type="primary" @click="stockOut">出库</el-button>
          <el-button v-else type="primary" :loading="loading" @click="save(formRef)">保 存</el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>
<script setup name="ComModal">
import { getBackDeliveryDetail, updateBackDelivery } from '../api/index'
import { reactive, ref, toRefs } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const loading = ref(false)
const formRef = ref(null)
const emits = defineEmits(['query'])

const data = reactive({
  form: {},
  title: '新增',
  handleType: null,
  rules: {

  },
})
const { form, title, handleType, rules } = toRefs(data)

const statusMap = new Map([
  ['edit', '编辑退货详情'],
  ['view', '查看'],
])

const open = (type, id) => {
  title.value = statusMap.get(type)
  handleType.value = type
  visible.value = true
  if (id) getDetail(id)
}

const initForm = () => {
  form.value = getForm()
}
// 初始化
const getForm = () => {
  return {
    detail: [
      {
        sku: "",//sku
        custom_sku: "",//自定义sku
        base_sku_code: "",//商品编码
        adjust_num: '',//调拨数量
        location_id: "",//货位编码
        remark: "",//备注
        location: []
      }
    ]
  }
}

onMounted(() => {
  initForm()
})

const getDetail = async (id) => {
  try {
    const res = await getBackDeliveryDetail({
      id
    })
    form.value = res.data
  } catch (e) {
    throw Error(e)
  }
}

const save = () => {
  if (!formRef.value) return
  formRef.value.validate((valid) => {
    if (valid) {
      loading.value = true
      if (form.value.id) {
        updateBackDelivery({
          id: form.value.id,//退货物流交接单id
          delivery: form.value.delivery,//快递公司
          delivery_no: form.value.delivery_no,//快递单号
          fee: form.value.fee,//费用(元)
          remark: form.value.remark//备注
        })
          .then((res) => {
            ElMessage.success(res.message)
            emits('query')
            close()
          })
          .finally((e) => {
            loading.value = false
          })
      }
    }
  })
}

const stockOut = async () => {
  let formData = {}
  formData.id = form.value.id
  formData.detail = form.value.detail.map(i => {
    return {
      id: i.id,
      out_warehouse_num: i.out_warehouse_num
    }
  })
  try {
    const res = await updateBackDelivery(formData)
    ElMessage.success(res.message)
    emits('query')
    close()
  } catch (e) {
    throw Error(e)
  }
}
const close = () => {
  initForm()
  visible.value = false
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.borderNone {
  :deep(.el-input__wrapper) {
    border: none;
    box-shadow: none
  }
}
</style>
